<template>
    <el-card>
       <el-form :inline="true" class="demo-form-inline">
           <el-form-item label="一级分类">
            <el-select v-model="c1Id">
              <!-- option：label即为显示文字 value属性即为select下拉菜单收集的数据 -->
              <el-option v-for="(c1,index) in c1Arr" :key="c1.id" :label="c1.name" :value="c1.id"></el-option>
            </el-select>
           </el-form-item>
           <el-form-item label="二级分类">
            <el-select>
              <el-option label="北京"></el-option>
              <el-option label="上海"></el-option>
              <el-option label="广州"></el-option>
              <el-option label="深圳"></el-option>
            </el-select>
           </el-form-item>
           <el-form-item label="三级分类">
            <el-select>
              <el-option label="北京"></el-option>
              <el-option label="上海"></el-option>
              <el-option label="广州"></el-option>
              <el-option label="深圳"></el-option>
            </el-select>
           </el-form-item>
       </el-form>
    </el-card>
</template>

<script lang="ts" setup>
// 引入分类的接口方法
import {reqC1} from '@/api/product/attr/index.ts'
// 引入生命周期函数钩子
import { onMounted,ref } from 'vue';
// 存储一级分类的数据
let c1Arr = ref<any>([])
let c1Id = ref<number|string>('')
//组件挂载完毕
onMounted(()=>{
  // 获取一级分类的数据
  getC1()
})
// 获取一级分类的数据
const getC1= async()=>{
  let result:any = await reqC1()
  // console.log(result)
  if(result.code==200){
    c1Arr.value=result.data
  }
}
</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>